<template>
	<view class="turnover">
		
		<view class="tab flex_r_around">
			<view class="list flex_c" @click="onTab(2)">
				<text>支出</text>
				<i :id="tab == 2 ? 'select' : ''"></i>
			</view>
			<view class="list flex_c" @click="onTab(1)">
				<text>收入</text>
				<i :id="tab == 1 ? 'select' : ''"></i>
			</view>
		</view>
		
		<u-calendar v-model="show" mode="range" @change="change"></u-calendar>

		<view class="box flex_c">
			<view class="header flex_r_between">
				<view class="calendar" @click="openCalendar">
					<image src="/static/technician/calendar.png"></image>
					<text v-if="!endDate">{{startDate}}</text>
					<text v-else>{{startDate}} - {{endDate}}</text>
					<uni-icons type="bottom" :size="20" color="#333"></uni-icons>
				</view>
				<text class="money">
					{{tab == 1 ? '收入' : '支出'}}：¥{{price}}
				</text>
			</view>

			<view class="detail">
				<blankPage img="https://qiniu-cdn.maeiyun.com/imgs/blank/no_order.png" text="暂无记录" :width="161" :height="129" v-show="list.length == 0"></blankPage>
				<view class="list flex_r_between" @click="openPopup(item)" v-for="(item,index) in list" :key="index">
					<view class="left">
						<text>{{tab==2 ? '提现' : '技师收入'}} {{item.real_name}}</text>
						<view>
							<uni-dateformat :date="item.create_time" format="yyyy-MM-dd"></uni-dateformat>
						</view>
					</view>
					<view class="right">
						<i>{{tab == 2 ? '-' : '+'}}</i> ¥{{tab == 1 ? item.store_price : item.price}}
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="close">
					<uni-icons type="close" :size="20" color="#333" @click="closePopup"></uni-icons>
				</view>
				<view class="top flex_c">
					<image :src="info.work_image" mode="aspectFill"></image>
					<text>{{tab==2 ? '提现' : '技师收入'}}</text>
					<view>{{tab == 2 ? '-' : '+'}}</i> ¥{{tab == 2 ? info.price : info.store_price}}</view>
				</view>
				<view class="bottom">
					<view class="item">
						<text>收入详情</text>
						<view>{{tab==2 ? '提现' : '技师收入'}}</view>
					</view>
					<view class="item">
						<text>完成时间</text>
						<view>
							<uni-dateformat :date="info.create_time" format="yyyy年MM月dd日 hh:mm"></uni-dateformat>
						</view>
					</view>
					<view class="item" v-show="tab == 1">
						<text>支付方式</text>
						<view>{{info.pay_type == 1 ? '微信' : '支付宝'}}</view>
					</view>
					<view class="item" v-show="tab == 1">
						<text>订单编号</text>
						<view>{{info.order_sn}}</view>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,

				startDate: '',
				endDate: '',
				
				tab:2,
				page:1,
				total:0,
				price:0,
				
				list:[],
				
				info:'',
			}
		},
		onReachBottom() {
			if(this.total > this.list.length){
				this.page++
				this.getList()
			}
		},
		methods: {
			change(e) {
				this.startDate = e.startDate
				this.endDate = e.endDate
				this.page = 1
				this.list = []
				this.getList()
			},
			onTab(e){
				this.tab = e
				this.page = 1
				this.list = []
				this.getList()
			},
			getList(){
				this.$get('/store.bank/statement',{
					page:this.page,
					type:this.tab,
					times:this.startDate + '~' + this.endDate,
				}).then(res=>{
					this.total = res.data.total
					this.price = res.data.price
					res.data.data.forEach(item=>{
						this.list.push(item)
					})
				})
			},
			openCalendar() {
				this.show = true
			},
			getToday() {
				let time = new Date()
				let year = time.getFullYear()
				let month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
				let date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate()
				return `${year}-${month}-${date}`
			},
			getWeek() {
				let time = Number(new Date()) - 604800000
				time = new Date(time)
				let year = time.getFullYear()
				let month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
				let date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate()
				return `${year}-${month}-${date}`
			},
			openPopup(e) {
				this.info = e
				this.$refs.popup.open()
			},
			closePopup(){
				this.$refs.popup.close()
			},
		},
		onLoad() {
			this.startDate = this.getWeek()
			this.endDate = this.getToday()
			this.getList()
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .u-calendar__action {
		display: flex !important;
		padding: 20px 18%;
	}
	.turnover {
		padding: 30rpx 0 30rpx;
		min-height: 100vh;
		box-sizing:border-box;
	}

	.box {
		min-height: calc(100vh - 170rpx);
	}
	
	.tab {
		padding: 20rpx 40rpx;
		position: sticky;
		top: 0;
		background: #FFF;
		margin-bottom: 20rpx;
		height: 90rpx;
		box-sizing: border-box;
		.list {
			i {
				width: 80%;
				height: 10rpx;
				background: transparent;
				border-radius: 6rpx;
				margin-top: -10rpx;
			}
			#select {
				background: rgba(46,126,250,0.6);
			}
			text {
				font-size: 32rpx;
				color: #000000;
				line-height: 45rpx;
			}
		}
	}

	.header {
		width: calc(100vw - 60rpx);
		margin-bottom: 30rpx;
		height: 60rpx;

		.calendar {
			display: flex;
			align-items: center;

			image {
				width: 27rpx;
				height: 26rpx;
			}

			text {
				font-size: 26rpx;
				color: #000000;
				line-height: 37rpx;
				margin: 0 10rpx;
			}
		}

		.money {
			font-size: 26rpx;
			color: #AAAAAA;
			line-height: 37rpx;
		}
	}

	.detail {
		width: calc(100vw - 60rpx);
		background: #FFFFFF;
		border-radius: 14rpx;
		flex: 1;
		padding: 0 30rpx;

		.list {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #E9E9E9;

			.left {
				text {
					font-size: 30rpx;
					color: #000000;
					line-height: 42rpx;
				}

				view {
					margin-top: 3rpx;
					font-size: 24rpx;
					color: #8E8E8E;
					line-height: 33rpx;
				}
			}

			.right {
				font-size: 30rpx;
				color: #FF0000;
				line-height: 42rpx;
				display: flex;
				align-items: center;

				i {
					font-size: 30rpx;
					color: #FF0000;
					line-height: 42rpx;
					margin-right: 9rpx;
					font-style: normal;
				}
			}
		}
	}

	.popup {
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.close {
			display: flex;
			flex-direction: row-reverse;
		}
		.top {
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
			text {
				margin: 11rpx 0 1rpx;
				font-size: 22rpx;
				color: #8A8A8A;
				line-height: 30rpx;
			}
			view {
				font-size: 32rpx;
				font-weight: 600;
				color: #FF0000;
				line-height: 45rpx;
			}
		}
		.bottom {
			padding: 30rpx 30rpx 20rpx;
			background: rgba(243,243,243,0.9);
			border-radius: 14rpx;
			margin-top: 40rpx;
			.item {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;
				text {
					font-size: 22rpx;
					color: #7D7D7D;
					line-height: 44rpx;
					margin-right: 20rpx;
				}
				view {
					font-size: 22rpx;
					color: #333330;
					line-height: 44rpx;
				}
			}
		}
	}
</style>